<template>
  <div>
      <!-- 头部 -->
      <header>
      <div class="w1080">
         <div class="logo">
            <img src="@/assets/img/logo.png" alt="">
         </div>
         <ul>
            <li><router-link to="/watch/index">首页</router-link></li>
            <li @mouseover="changeStyle"><router-link to="/watch/smartwatch">智能手表</router-link></li>
            <li><router-link to="/watch/bracelet">智能手环</router-link></li>
            <li><router-link to="/watch/customization">定制服务</router-link></li>
            <li><router-link to="/watch/about">关于我们</router-link></li>
            <li><router-link to="/watch/contart">联系我们</router-link></li>
            <li><router-link to="/watch/new">新闻</router-link></li>
         </ul>
          <!--  -->
         <div class="language" @mousemove="language" @mouseleave="languages">
            <a href="javascript:;" ref="language1" >语言&nbsp;&gt;</a>
            <div ref="language2" style="display: none">
               <div><router-link to="/watch">中文</router-link></div>
               <div><router-link to="/watch2">英文</router-link></div>
            </div>
         </div>
      </div>
      </header>
      <div class="p-smartwatch1" ref="psmartwatch" @mouseover="removeStyle">
        <div class="p-w1080">
          <div class="p-fl fl">
          <h2>智能手表</h2>
          <ul>
            <li v-for="(item,index) in all" :key="index" @mouseover="allsmartwatch1(item.id)">{{item.name}}&gt;</li>
          </ul>
         </div>
          <div class="p-navbox fr">
           <div class="p-active2" v-for="item2 in all2" :key="item2.id" >
                <a href="javascript:;" @click="allsmartwatch2(item2)">
                 <img :src="'http://www.kymid.com/testphp/public'+ item2.image" alt="">
                    <h3>{{item2.name_en}}</h3>
            </a>
            </div>
       </div>
         <div class="p-xinghao" @click="removeStyle2">
            <router-link to="/watch/allsmartwatch">
               全部产品型号 &gt;&gt;
            </router-link>
          </div>
        </div>
    </div>
    <router-view></router-view>
      <!-- 底部 -->
      <footer>
      <div class="footer w1080">
        <router-link to="/watch/customization">定制服务</router-link>
         <span>|</span>
         <router-link to="/watch/about">关于我们</router-link>
         <span>|</span>
         <router-link to="/watch/contart">联系我们</router-link>
         <span>|</span>
         <router-link to="/watch/new">新闻</router-link>
         <span>|</span>
         <a href="javascript:;">常见问题</a>
         <span>|</span>
      </div>
      <p>
         © 2017 Shenzhen KY Techiology Co.,Ltd All rights reserved. Privacy Policy
         <span>粤 ICP 备 16022586 号 - 1</span>
      </p>
      </footer>
  </div>
</template>
<style scoped src="@/assets/css/allsmartwatch.css"></style>
<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
const { proxy } = getCurrentInstance()
const all = ref(null)
const all2 = ref(null)
const ids = ref(4)
const language1 = ref(null)
const language2 = ref(null)
function language () {
   console.log(language1.value)
   language1.value.style.display = 'none'
   language2.value.style.display = 'block'
}
function languages () {
   console.log(language1.value)
   language2.value.style.display = 'none'
   language1.value.style.display = 'block'
}
onMounted(() => {
    data1()
    data2(4)
})
function changeStyle () {
        proxy.$refs.psmartwatch.style.display = 'block'
        console.log(11)
    }
function removeStyle (e) {
  if (e.clientY >= 285) {
      proxy.$refs.psmartwatch.style.display = 'none'
  }
}
function removeStyle2 (e) {
   proxy.$refs.psmartwatch.style.display = 'none'
}
function data1 () {
     proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/type_list').then(val => {
   all.value = val.data.msg[1].children1
   console.log(all.value)
})
}
function data2 (id) {
    proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/good_type?product_id=' + id + '&offset=0&limit=8').then(val => {
   all2.value = val.data.msg.slice(0, 4)
   console.log(all2.value)
})
}
function allsmartwatch1 (id) {
    if (ids.value !== id) {
         ids.value = id
         data2(id)
    }
}
function allsmartwatch2 (id) {
    proxy.$store.commit('imgs', id)
    proxy.$router.push('/watch/know')
}
</script>

<style>
header .language>div>div:nth-child(1) a::after {
   position: absolute;
   bottom: 25px;
   left: 50%;
   transform: translateX(-25%);
   display: inline-block;
   content: '';
   width:0;
   height: 3px;
   background: #85bc24;
   transition: width 0.5s;
}
header .language>div>div a::after {
   position: absolute;
   bottom: -3px;
   left: 50%;
   transform: translateX(-25%);
   display: inline-block;
   content: '';
   width: 0;
   height: 3px;
   background: #85bc24;
   transition: width 0.5s;
}

header .language>div>div:hover a::after {
   width: 100%;
}
.p-fl>h2{
   border-bottom: 0 !important;
}
.p-fl ul li:hover{
   font-weight: 700;
}
.p-smartwatch1{
   width: 100%;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
    display:none;
}
.p-w1080{
    position: relative;
}
 .p-xinghao{
    position: absolute;
    right: -250px;
    top: 64px;
    width: 180px;
    height: 166px;
    text-align: right;
    border-left: 1px solid #b2b2b2;
}
.p-xinghao a {
    line-height: 166px;
    font-size: 17px;
    color: #333;
}
header ul li>a::after{
   position: absolute;
   bottom: -3px;
   left: 50%;
   transform: translateX(-50%);
   display: inline-block;
   content: '';
   width: 0;
   height: 3px;
   background: #85bc24;
   transition: width 0.5s;
}
header ul li:hover>a::after{
   width: 100%;
}
header ul .router-link-active{
   border-bottom: 3px solid #85bc24;
}
.p-all{
   margin-left: 10px;
   font-size: 14px;
   font-weight: 500;
}
</style>
